<template>
  <div>
    <remote-view
      v-if="ssrname"
      :key="ssrname"
      :clientFetch="() => clientFetch(ssrname)"
      :serverFetch="() => serverFetch(ssrname)"
    />
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { RemoteView } from "@fmfe/genesis-remote";
import axios from "axios";

interface Methods {
  clientFetch: (ssrname: string) => Promise<void>;
  serverFetch: (ssrname: string) => Promise<void>;
}
interface Computed {
  ssrname: string;
}

export default Vue.extend<any, Methods, Computed>({
  name: "container",
  components: {
    RemoteView,
  },
  computed: {
    ssrname() {
      return this.$route.meta.ssrname;
    },
  },
  methods: {
    /**
     * 客户端远程调用时，走 CSR 渲染
     */
    async clientFetch(ssrname: string) {
      const renderUrl = encodeURIComponent(this.$route.fullPath);
      const res = await axios.get(
        `/api/${ssrname}/render`,
        {
          params: {
            routerMode: "history",
            renderMode: "csr-json",
            renderUrl,
          },
        }
      );
      if (res.status === 200) {
        return res.data;
      }
      return null;
    },
    /**
     * 服务端远程调用时，走 SSR渲染
     */
    async serverFetch(ssrname: string) {
      const renderUrl = encodeURIComponent(this.$route.fullPath);
      const res = await axios.get(
        `/api/${ssrname}/render`,
        {
          params: {
            routerMode: "history",
            renderMode: "ssr-json",
            renderUrl,
          },
        }
      );
      if (res.status === 200) {
        return res.data;
      }
      return null;
    },
  },
});
</script>
